* {
    padding: 0px;
    margin: 0px;
  }
  .box {
    width: 1200px;
    margin: 30px auto;
  }
  .box-title {
    width: 100%;
    height: 40px;
    display: flex;
    h2 {
      width: 130px;
      height: 32px;
      font: 24px/30px Microsoft yahei;
      color: #f55;
      line-height: 40px;
    }
    span {
      font: 14px/30px Microsoft yahei;
      color: #999;
      padding: 10px;
    }
  }
  .box-list {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-top: 1px solid #f55;
    .list-top {
      width: 65px;
      height: 50px;
      display: flex;
      align-items: center;
      span {
        display: block;
        width: 24px;
        height: 24px;
        margin-right: 5px;
        background-image: url(./images/icon_index.png);
        background-position: -576px -101px;
      }
    }
    .list-text {
      width: 480px;
      height: 100%;
      flex: 2;
    }
    a {
      text-decoration: none;
      color: #555 !important;
      font: 14px/24px Microsoft yahei;
    }
  }
  .list-text {
    ul {
      width: 580px;
      height: 100%;
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        width: 56px;
        font: 14px/22px Microsoft yahei;
        color: #555;
        padding: 1px 10px;
        margin: 4px 10px 0;
        border-radius: 12px;
        cursor: pointer;
        &:hover {
          color: #f66;
          border: 1px solid #f66;
        }
      }
    }
  }
  .active {
    background: #f66;
    color: #fff !important;
    border: 1px solid #f66;
  }
  .box-attractions {
    width: 100%;
    height: 218px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .box-img-text {
      &:hover {
        .text-p {
          border-bottom: 2px solid red;
        }
      }
    }
  }
  .box-img-text {
    width: 310px;
    height: 210px;
    padding-top: 5px;
    .box-img {
      width: 305px;
      height: 167px;
      position: relative;
      overflow: hidden;
      img {
        width: 97%;
        height: 186px;
        transition: all .5s;
      }
    }
    &:hover {
      img {
        transform: translateY(-5px);
      }
    }
    .text-p {
      width: 94%;
      height: 23px;
      padding: 10px 5px 10px;
      background-color: #f7f7f7;
      color: #555;
      font-size: 14px;
      border-bottom: 1px solid #555;
    }
  }
  .box-img {
    span {
      position: absolute;
      top: 127px;
      left: 10px;
      color: white;
      font-size: 25px;
    }
  }

  